<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
  
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>2.2.2. Add / Edit Instructor</title>

  
</head><body>

<h2> 2.2.2  Add / Edit Instructor </h2>


<hr />
<h2>Instructor Tab Overview</h2>
<p>
	This is a view that is available only to a system admin.  It will allow the admin to see all
	of the teachers, and their related info.  The window on the left contains every instructor's name
	that is in the database, sorted in alphabetical order (by last name).  When selecting an instructor 
	on the left, it becomes highlighted (like we see below for "Bellardo, John").  When selecting an
	instructor, the window on the right displays all that instructor's information.  All information 
	is displayed in <strong>editable</strong> text-fields.
</p>

<hr /><br />
<div align="center">
<a href="../images/instructor_overview.png"><img src="../images/instructor_overview.png" width="800" height="450"/></a>

<p>Figure 1.  Instructors Tab (overview)</p>
</div>

<div align="center">
<a href="../images/instructor_overview2.png"><img src="../images/instructor_overview2.png" width="800" height="450"/></a>

<p>Figure 2.  Instructors Tab (overview)</p>
</div>
<hr />

<h2>Modifying an Instructor</h2>
<p>
	To modify an instructor's information, in this case professor Bellardo's information, simply select
	Bellardo from the left window to pull up his information.  Once his information is displayed in the 
	right window, all the text-fields are editable.  One can simply click inside the phone number field to
	change / modify.  Once modifications are made, a user can "commit changes" to write the new values
	to the database, or "restore" the text fields to the previous values.<br /><br />
	Each field has the following constraints:
	<ol>
		<li>First Name: Must contain ONLY alphabetical characters (a-z and A-Z).  Limited to 30 characters.</li>
		<li>Last Name: Same as first name.</li>
		<li>Phone Number: Must contain ONLY numerical characters and the dash character.  (1-9 and '-') Limited to 12 characters.</li>
		<li>Office Number: Can contain alphanumeric characters.  Limited to 10 characters.</li>
		<li>Department: Must contain ONLY alphabetical characters.  Limited to 100 characters.</li>
		<li>Email Address:  Must be a valid email address, and properly formatted (name@domain.com)</li>
	</ol>
	
	**Any violation of these restrictions results in the error/ alert message shown in figure ...
	The alert is triggered when the user clicks off the text-field they just modified.  After the error
	message is viewed and the user clicks "ok," the text-field in violation will have the cursor inside,
	ready to edit.
</p>
<hr /><br />
<div align="center">
<a href="../images/instructor_edit_1.png"><img src="../images/instructor_edit_1.png" width="800" height="450"/></a>

<p>Figure 3. Editing the phone number text-field -- clicking inside text-field and deleting the phone number.</p>
</div>

<div align="center">
<a href="../images/instructor_edit_2.png"><img src="../images/instructor_edit_2.png" width="800" height="450"/></a>

<p>Figure 4. Editing the phone number text-field  -- changing the phone number.</p>
</div>

<div align="center">
<a href="../images/instructor_edit_3.png"><img src="../images/instructor_edit_3.png" width="800" height="450"/></a>

<p>Figure 5. Once modifications have been made, a user clicks the "commit" button to update the instructor's
information in the database.</p>
</div>

<div align="center">
<a href="../images/instructor_edit_error.png"><img src="../images/instructor_edit_error.png" width="800" height="450"/></a>

<p>Figure 6. Error message generated when violating the phone number constraint.</p>
</div>
<br /><hr />

<h2>Adding an Instructor</h2>

<p>
	To add an instructor, one would click the "+" button at the bottom of the left window, as shown in figure 6.
	Once the user clicks this button, the window on the right will display a blank set of information 
	corresponding the new instuctor just added.  One would fill these text-fields in as appropriate, and 
	when finished, one would click the "commit changes" button to update the information of the new instructor.
	Once a user clicks the "commit changes" button, the instructor name will update to the new name.  Clicking 
	"restore" in this case, will undo the add.  
</p>

<hr /><br />
<div align="center">
<a href="../images/instructor_add_new.png"><img src="../images/instructor_add_new.png" width="800" height="450"/></a>

<p>Figure 7.  After clicking the "+" button, this is what the interface will look like.</p>
</div>

<div align="center">
<a href="../images/instructor_add_commit.png"><img src="../images/instructor_add_commit.png" width="800" height="450"/></a>

<p>
Figure 8.  After clicking the "commit changes" button, the window on the left is updated to hold 
the full name of what was added in the right window.  Also, the newly added instructor is placed in
alphabetical order amongst the other instructors.
</p>
</div>
<br /><hr />




<br>
<br>
<br>
<br>
<hr width=80% size=3>
<center>
<font size=-1>
<font color=black> Prev: </font>[none]
 | <font color=black> Next: </font><a href=""><em><strong><font color=red>Your
 section 2.2</font></strong></em></a>
 | <font color=black> Up: </font><a href="../functional.html">functional</a>
 | <font color=black> Top: </font><a href="../../index.html">index</a></font>
</center>
<hr width=80% size=3>

</body></html>
